import React from 'react'
import ReactDom from 'react-dom'
// 函数方式定义组件
const StateCom = () => {
  //   render()
  //   {
  return <p>这是函数方式定义的组件</p>
  //   }
}
class StateHello extends React.Component {
  // 定义state状态
  state = {
    list: [
      { id: 1, name: '明天会更好' },
      { id: 2, name: '难忘今宵' }
    ],
    isLoading: false
  }
  render() {
    return (
      <div>
        <ul>
          {this.state.list.map((it) => (
            <li key={it.id}>{it.name}</li>
          ))}
        </ul>
        <p>{this.state.isLoading ? '加载中' : '加载完成'}</p>
      </div>
    )
  }
}
const app = (
  <div>
    state状态的使用
    {/* {使用函数方式定义的组件} */}
    <StateCom></StateCom>
    {/* {构造函数使用组件} */}
    <StateHello></StateHello>
  </div>
)

ReactDom.render(app, document.getElementById('root'))
